import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const FirePieChartMeta: IPublicTypeComponentMetadata = {
  componentName: 'FirePieChart',
  title: '消防设备饼图',
  category: '图表',
  group: '消防安全',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'hzdz-charts',
    version: '0.1.0',
    exportName: 'FirePieChart',
    main: 'src/index.tsx',
    destructuring: true,
    subName: ''
  },
  props: [
    {
      name: 'ref',
      propType: 'object',
    },
    {
      name: 'key',
      propType: 'string',
    },
    {
      name: 'style',
      propType: 'object',
    },
    {
      name: 'className',
      propType: 'string',
    },
    {
      name: 'width',
      propType: 'number',
      description: '容器宽度'
    },
    {
      name: 'height',
      propType: 'number',
      description: '容器高度'
    },
    {
      name: 'backgroundColor',
      propType: 'string',
      description: '容器背景色'
    },
    {
      name: 'borderRadius',
      propType: 'number',
      description: '容器圆角'
    },
    {
      name: 'data',
      propType: 'array',
      description: '设备数据'
    },
    {
      name: 'totalValue',
      propType: 'number',
      description: '总数值'
    },
    {
      name: 'pieSize',
      propType: 'number',
      description: '饼图大小'
    },
    {
      name: 'pieStrokeWidth',
      propType: 'number',
      description: '饼图边框宽度'
    },
    {
      name: 'pieStrokeColor',
      propType: 'string',
      description: '饼图边框颜色'
    },
    {
      name: 'showCenterValue',
      propType: 'bool',
      description: '显示中心数值'
    },
    {
      name: 'centerValue',
      propType: 'string',
      description: '中心数值'
    },
    {
      name: 'centerValueFontSize',
      propType: 'number',
      description: '中心数值字体大小'
    },
    {
      name: 'centerValueColor',
      propType: 'string',
      description: '中心数值颜色'
    },
    {
      name: 'centerValueFontFamily',
      propType: 'string',
      description: '中心数值字体'
    },
    {
      name: 'centerValueFontWeight',
      propType: 'number',
      description: '中心数值字体粗细'
    },
    {
      name: 'centerValueTextShadow',
      propType: 'string',
      description: '中心数值文字阴影'
    },
    {
      name: 'centerValueBackground',
      propType: 'string',
      description: '中心数值背景'
    },
    {
      name: 'showCenterLabel',
      propType: 'bool',
      description: '显示中心标签'
    },
    {
      name: 'centerLabel',
      propType: 'string',
      description: '中心标签'
    },
    {
      name: 'centerLabelFontSize',
      propType: 'number',
      description: '中心标签字体大小'
    },
    {
      name: 'centerLabelColor',
      propType: 'string',
      description: '中心标签颜色'
    },
    {
      name: 'centerLabelFontFamily',
      propType: 'string',
      description: '中心标签字体'
    },
    {
      name: 'centerLabelFontWeight',
      propType: 'number',
      description: '中心标签字体粗细'
    },
    {
      name: 'showLegend',
      propType: 'bool',
      description: '显示图例'
    },
    {
      name: 'legendPosition',
      propType: 'string',
      description: '图例位置'
    },
    {
      name: 'legendFontSize',
      propType: 'number',
      description: '图例字体大小'
    },
    {
      name: 'legendColor',
      propType: 'string',
      description: '图例颜色'
    },
    {
      name: 'legendFontFamily',
      propType: 'string',
      description: '图例字体'
    },
    {
      name: 'legendFontWeight',
      propType: 'number',
      description: '图例字体粗细'
    },
    {
      name: 'legendGap',
      propType: 'number',
      description: '图例间距'
    },
    {
      name: 'legendItemGap',
      propType: 'number',
      description: '图例项间距'
    },
    {
      name: 'onSliceClick',
      propType: 'func',
      description: '扇形点击事件'
    }
  ],
  configure: {
    props: [
      // 容器配置
      {
        name: 'container',
        type: 'group',
        display: 'accordion',
        title: {
          label: '容器配置',
        },
        items: [
          {
            name: 'width',
            title: { label: '容器宽度' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 400 }
          },
          {
            name: 'height',
            title: { label: '容器高度' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 200 }
          },
          {
            name: 'backgroundColor',
            title: { label: '容器背景色' },
            setter: { componentName: 'ColorSetter', isRequired: false, initialValue: 'transparent' }
          },
          {
            name: 'borderRadius',
            title: { label: '容器圆角' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 0 }
          }
        ]
      },
      // 数据配置
      {
        name: 'data',
        type: 'group',
        display: 'accordion',
        title: {
          label: '数据配置',
        },
        items: [
          {
            name: 'data',
            title: { label: '设备数据' },
            setter: {
              componentName: 'ArraySetter',
              isRequired: false,
              initialValue: [
                { name: '喷淋', value: 320, color: '#93DBFF' },
                { name: '烟感/温感', value: 280, color: '#5AF3B8' },
                { name: '应急灯', value: 180, color: '#FF6F64' },
                { name: '消防栓', value: 150, color: '#FFD982' },
                { name: '喇叭', value: 120, color: '#2297FF' },
                { name: '安全疏散指示灯', value: 156, color: '#4D74FF' }
              ],
              config: {
                items: [
                  {
                    name: 'name',
                    title: '设备名称',
                    setter: 'StringSetter',
                    initialValue: '喷淋'
                  },
                  {
                    name: 'value',
                    title: '设备数量',
                    setter: 'NumberSetter',
                    initialValue: 320
                  },
                  {
                    name: 'color',
                    title: '设备颜色',
                    setter: 'ColorSetter',
                    initialValue: '#93DBFF'
                  }
                ]
              },
              newItemDefault: {
                name: '新设备',
                value: 0,
                color: '#93DBFF'
              },
              sortable: true
            }
          },
          {
            name: 'totalValue',
            title: { label: '总数值' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 1206 }
          }
        ]
      },
      // 饼图样式配置
      {
        name: 'pieStyle',
        type: 'group',
        display: 'accordion',
        title: {
          label: '饼图样式',
        },
        items: [
          {
            name: 'pieSize',
            title: { label: '饼图大小' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 137 }
          },
          {
            name: 'pieStrokeWidth',
            title: { label: '饼图边框宽度' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 0 }
          },
          {
            name: 'pieStrokeColor',
            title: { label: '饼图边框颜色' },
            setter: { componentName: 'ColorSetter', isRequired: false, initialValue: 'transparent' }
          }
        ]
      },
      // 中心数值配置
      {
        name: 'centerValue',
        type: 'group',
        display: 'accordion',
        title: {
          label: '中心数值',
        },
        items: [
          {
            name: 'showCenterValue',
            title: { label: '显示中心数值' },
            setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true }
          },
          {
            name: 'centerValue',
            title: { label: '中心数值' },
            setter: { componentName: 'StringSetter', isRequired: false, initialValue: '1206' }
          },
          {
            name: 'centerValueFontSize',
            title: { label: '中心数值字体大小' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 24 }
          },
          {
            name: 'centerValueColor',
            title: { label: '中心数值颜色' },
            setter: { componentName: 'ColorSetter', isRequired: false, initialValue: '#FFFFFF' }
          },
          {
            name: 'centerValueFontFamily',
            title: { label: '中心数值字体' },
            setter: { componentName: 'StringSetter', isRequired: false, initialValue: 'DINAlternate' }
          },
          {
            name: 'centerValueFontWeight',
            title: { label: '中心数值字体粗细' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 700 }
          },
          {
            name: 'centerValueTextShadow',
            title: { label: '中心数值文字阴影' },
            setter: { componentName: 'StringSetter', isRequired: false, initialValue: '0px 0px 7px rgba(0,126,215,0.4)' }
          },
          {
            name: 'centerValueBackground',
            title: { label: '中心数值背景' },
            setter: { componentName: 'StringSetter', isRequired: false, initialValue: 'linear-gradient(90deg, #FFFFFF 0%, #81C6FF 100%)' }
          }
        ]
      },
      // 中心标签配置
      {
        name: 'centerLabel',
        type: 'group',
        display: 'accordion',
        title: {
          label: '中心标签',
        },
        items: [
          {
            name: 'showCenterLabel',
            title: { label: '显示中心标签' },
            setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true }
          },
          {
            name: 'centerLabel',
            title: { label: '中心标签' },
            setter: { componentName: 'StringSetter', isRequired: false, initialValue: '消防栓' }
          },
          {
            name: 'centerLabelFontSize',
            title: { label: '中心标签字体大小' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 12 }
          },
          {
            name: 'centerLabelColor',
            title: { label: '中心标签颜色' },
            setter: { componentName: 'ColorSetter', isRequired: false, initialValue: '#FFFFFF' }
          },
          {
            name: 'centerLabelFontFamily',
            title: { label: '中心标签字体' },
            setter: { componentName: 'StringSetter', isRequired: false, initialValue: 'SourceHanSansSC' }
          },
          {
            name: 'centerLabelFontWeight',
            title: { label: '中心标签字体粗细' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 500 }
          }
        ]
      },
      // 图例配置
      {
        name: 'legend',
        type: 'group',
        display: 'accordion',
        title: {
          label: '图例配置',
        },
        items: [
          {
            name: 'showLegend',
            title: { label: '显示图例' },
            setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true }
          },
          {
            name: 'legendPosition',
            title: { label: '图例位置' },
            setter: { 
              componentName: 'RadioGroupSetter', 
              isRequired: false, 
              initialValue: 'right',
              props: {
                options: [
                  { label: '右侧', value: 'right' },
                  { label: '底部', value: 'bottom' }
                ]
              }
            }
          },
          {
            name: 'legendFontSize',
            title: { label: '图例字体大小' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 14 }
          },
          {
            name: 'legendColor',
            title: { label: '图例颜色' },
            setter: { componentName: 'ColorSetter', isRequired: false, initialValue: '#FFFFFF' }
          },
          {
            name: 'legendFontFamily',
            title: { label: '图例字体' },
            setter: { componentName: 'StringSetter', isRequired: false, initialValue: 'SourceHanSansSC' }
          },
          {
            name: 'legendFontWeight',
            title: { label: '图例字体粗细' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 400 }
          },
          {
            name: 'legendGap',
            title: { label: '图例间距' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 20 }
          },
          {
            name: 'legendItemGap',
            title: { label: '图例项间距' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 16 }
          }
        ]
      }
    ],
    supports: {
      style: true,
      className: true,
      events: ['onSliceClick']
    }
  }
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '消防设备饼图',
    screenshot: '',
    schema: {
      componentName: 'FirePieChart',
      props: {
        width: 400,
        height: 200,
        backgroundColor: 'transparent',
        borderRadius: 0,
        data: [
          { name: '喷淋', value: 320, color: '#93DBFF' },
          { name: '烟感/温感', value: 280, color: '#5AF3B8' },
          { name: '应急灯', value: 180, color: '#FF6F64' },
          { name: '消防栓', value: 150, color: '#FFD982' },
          { name: '喇叭', value: 120, color: '#2297FF' },
          { name: '安全疏散指示灯', value: 156, color: '#4D74FF' }
        ],
        totalValue: 1206,
        pieSize: 137,
        pieStrokeWidth: 0,
        pieStrokeColor: 'transparent',
        showCenterValue: true,
        centerValue: '1206',
        centerValueFontSize: 24,
        centerValueColor: '#FFFFFF',
        centerValueFontFamily: 'DINAlternate',
        centerValueFontWeight: 700,
        centerValueTextShadow: '0px 0px 7px rgba(0,126,215,0.4)',
        centerValueBackground: 'linear-gradient(90deg, #FFFFFF 0%, #81C6FF 100%)',
        showCenterLabel: true,
        centerLabel: '消防栓',
        centerLabelFontSize: 12,
        centerLabelColor: '#FFFFFF',
        centerLabelFontFamily: 'SourceHanSansSC',
        centerLabelFontWeight: 500,
        showLegend: true,
        legendPosition: 'right',
        legendFontSize: 14,
        legendColor: '#FFFFFF',
        legendFontFamily: 'SourceHanSansSC',
        legendFontWeight: 400,
        legendGap: 20,
        legendItemGap: 16
      }
    }
  }
];

export default {
  ...FirePieChartMeta,
  snippets
}; 